<template>
  <div>
    <el-tabs type="border-card" v-model="activname" @tab-click="switchTab">
      <el-tab-pane
        v-for="item in TAB_LISTS"
        :key="item.name"
        :disabled="tableInfo.loading"
        v-model="item.name"
        :label="item.title"
        :name="item.name"
      />
      <BasicForm
        v-loading="formLoading"
        ref="formData"
        :menuId="menuId"
        needSetSearchFields
        formItemWidth="100px"
        :formColumns="formItems"
        :dataSource="formData"
        :handleSearchForm="handleQueryForm"
        @getFormData="getFormData"
        @getSearchFormFields="getSearchFormFields"
      />
      <el-card class="sourcing-table-card" shadow="never">
        <el-row slot="header" type="flex" justify="space-between" align="middle">
          <span>数据列表</span>
          <el-button size="mini" :loading="exportLoading" @click="exportData">导出</el-button>
        </el-row>
        <BasicList
          showActionCol
          :loading="tableInfo.loading"
          :show-select-col="false"
          :data-source="tableInfo.list"
          :columns="columns"
          :tableHeight="493"
          :actionColWidth="120"
          :actionRender="renderTableBtnAction"
          :total="total"
          :pagination="pagination"
          @pageChange="handlePageChange"
          @pageSizeSelect="handlePageSizeChange"
        />
      </el-card>
    </el-tabs>
    <InquiryDialog
      :visible.sync="inqueryFlag"
      :setdiolagdata="setdiolagdata"
    />
    <AttachmentDialog
      :visible.sync="attachDialogVisible"
      :fileGroupId="fileGroupId"
    />
  </div>
</template>
<script>
import BasicList from '@sourcing/components/BasicList';
import BasicForm from '@sourcing/components/BasicForm';
import BasicPage from '@/mixins/sourcing/basicPage';
import SearchFields from '@/mixins/sourcing/searchFields';
import AttachmentDialog from '@sourcing/components/AttachmentDialog';
import InquiryDialog from '../../demand-manage/elDialog/InquiryDialog';
import { getTableAction } from '@sourcing/utils/renderBtn';
import { handleOpenNewPageByName } from '@sourcing/utils'
import { createExcelByExport } from '@/utils/bizUtils';
import { getTableColumns, TAB_LISTS, FORM_ITEMS } from './constants';
import {
  getCustomerInquiryListService,
  exportCustomerInquiryListService,
  reinquiryService
} from '@/api/sourcing/purchaseInquiry'

export default {
  mixins: [BasicPage, SearchFields],
  components: {
    BasicList,
    BasicForm,
    InquiryDialog,
    AttachmentDialog,
  },
  data () {
    return {
      menuId: 201,
      formItems: FORM_ITEMS,
      TAB_LISTS,
      fileGroupId: null,
      attachDialogVisible: false,
      activname: '', // 当前选中的
      inqueryFlag: false,
      setdiolagdata: {
        tabtype: 4,
        selectionChangeval: null
      },
      columns: getTableColumns(this),
    }
  },
  methods: {
    init () {
      const { sts } = this.$route.query;
      if (sts) {
        this.activname = sts
        this.formData.billStatus = sts
        this.getTableData();
      }
    },
    // 渲染表格操作栏按钮
    renderTableBtnAction (h, { row }) {
      const actionList = [
        { label: '查看', method: this.handleView },
      ]
      // 询价中
      if (row.billStatus == 100) {
        actionList.push({ label: '询价取消', method: this.handleCancelInquery })
      }
      // 待生成订单
      if (row.billStatus == 400 && row.canAgainInquiry) {
        actionList.push({ label: '重新询价', method: this.handleReinquiry })
      }
      return getTableAction({ h, row, actionList })
    },
    // 采购询价列表
    async getTableData (pageNum) {
      if (pageNum) {
        this.pagenation.pageNum = pageNum;
      }
      const data = {
        condition: this.formData,
        ...this.pagenation
      };
      const res = await getCustomerInquiryListService(data, state => { this.tableInfo.loading = state })
      if (res) {
        const { data, rowCount } = res.data;
        this.tableInfo.list = data;
        this.total = rowCount;
      }
    },
    // 重新询价
    handleReinquiry (row) {
      this.$confirm('您确定要重新询价吗？', '提示', {
        type: 'warning',
      }).then(() => {
        this.reinquiryAction(row.sourcingBillId)
      }).catch(() => {});
    },
    // 重新询价接口调用
    async reinquiryAction (sourcingBillId) {
      const res = await reinquiryService({ sourcingBillId }, state => { this.tableInfo.loading = state })
      if (res) {
        this.setStorgeFn({ pageType: 1, isEdit: true, sourcingBillId })
        // 跳转至 详情报价页
        this.$router.push({ name: 'purchaseDetail' })
      }
    },
    // 切换tab
    switchTab (target) {
      this.$refs['formData'].handleResetForm();
      this.formData.billStatus = target.name;
      this.$nextTick(() => {
        this.handlePageChange(1)
      })
    },
    // 数据导出
    async exportData () {
      const res = await exportCustomerInquiryListService(
        this.formData,
        state => { this.exportLoading = state }
      )
      if (res) {
        createExcelByExport({ res, excelTitle: '客户询价列表' });
      }
    },
    // 查看
    handleView (row) {
      const { sourcingBillId } = row;
      let nameUrl = '';
      let detailInfo = {
        pageType: 1,
        sourcingBillId,
        isEdit: false,
      };
      if (row.billStatus == 400) { // 询价完成
        nameUrl = 'calibrationDetail';
        sessionStorage.setItem('isCompleteWinBill', 1)
        detailInfo.isEdit = false;
      } else { //  询价中 询价取消
        nameUrl = 'purchaseDetail';
        if (row.billStatus == 100) {
          detailInfo.isEdit = true;
        } else {
          detailInfo.isEdit = false;
        }
      }
      this.setStorgeFn(detailInfo)
      handleOpenNewPageByName(this, nameUrl)
    },
    setStorgeFn (param) {
      sessionStorage.setItem('detailInfo', JSON.stringify(param));
    },
    // 询价取消
    handleCancelInquery (row) {
      this.setdiolagdata.selectionChangeval = row.sourcingBillId
      this.inqueryFlag = true
    },
    // 查看附件
    handleViewFileList (row) {
      this.fileGroupId = row.fileGroupId;
      this.attachDialogVisible = true;
    },
    // 获取分类Id
    getCategoryUuid (val) {
      this.formData.categoryCode = val;
    }
  },
}
</script>
